<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-select
          v-model="category"
          placeholder="请选择分类"
          clearable
          filterable
        >
          <el-option
            v-for="item in cateList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-input
          v-model="proname"
          placeholder="请输入商品名称关键词"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-input
          v-model="price[0]"
          placeholder="最低价格"
          clearable
          style="width: 45%"
        ></el-input>
        -
        <el-input
          v-model="price[1]"
          placeholder="最高价格"
          clearable
          style="width: 45%"
        ></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-select
          v-model="sales"
          placeholder="请选择价格排序方式"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in orderArr"
            :key="index"
            :label="item"
            :value="index"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-button type="primary" size="default" @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="category" label="类别" width="150" />
      <el-table-column prop="proname" label="商品名称">
        <template #default="scope">
          <el-tooltip
            :content="scope.row.proname"
            placement="top"
            effect="dark"
          >
            <!-- content to trigger tooltip here -->
            {{ scope.row.proname.substring(0, 10) }}...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="商品描述">
        <template #default="scope">
          {{ scope.row.desc.substring(0, 15) }}...
        </template>
      </el-table-column>
      <el-table-column prop="originprice" label="价格" width="120" />
      <el-table-column prop="sales" label="销量" width="200" />
      <el-table-column prop="img1" label="商品图片" width="120">
        <template #default="scope">
          <img :src="scope.row.img1" alt="" style="height: 50px" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >详情</el-button
          >
          <el-button link type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="currentChange"
      v-model:currentPage="currentPage"
      background
      :page-sizes="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
import { prodGet } from "@/api/product";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      cateList: ["手机", "篮球", "酒类", "耳机", "零食"],
      category: "",
      proname: "",
      price: ["", ""],
      orderArr: ["从低到高", "从高到低"],
      sales: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    currentChange(page) {
      console.log(page);
      this.fetchData(page);
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    fetchData(page = 1) {
      let { category, proname, price, sales } = this;
      prodGet(page, category, proname, price, sales).then((res) => {
        let { results, count } = res.data;
        this.tableData = results;
        this.total = count;
      });
    },
  },
};
</script>
